<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <div class="powertopcon">
              <div  class="powertopli"  >店铺信息</div>
            </div>
          </div>
        </div>
        <div class="con">
          <el-page-header style="margin-bottom: 20px;" @back="goBack" content="店铺信息"></el-page-header>
          <div class="t_search_box">
            <el-button style="background-color: #2974FF;"  type="danger" round @click="openadd"  >添加商品</el-button>
          </div>
          <div>
            <el-table
            :header-cell-style="{
            background:'#F4F4F4',
            color:'#7D8087'}"
              :data="tableData"
              style="width: 100%;margin-top: 20px;">
              <el-table-column
                prop="source_name"
                align="center"
                label="商品名称">
              </el-table-column>
              <el-table-column
                prop="source_sku"
                align="center"
                label="商品编码">
              </el-table-column>
              <el-table-column
                prop="month"
                align="center"
                label="选择领取月份">
              </el-table-column>
              <el-table-column
                prop="created_at"
                align="center"
                label="添加时间">
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    @click="handleDelete(scope.row.id)">删除</el-button>
                    <el-button
                      size="mini"
                      type="text"
                      @click="bianji(scope.row)">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- <div style="text-align: right;margin-top: 20px;">
              <el-pagination
                @current-change="changepage"
                background
                layout="prev, pager, next"
                :total="total">
              </el-pagination>
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 添加商品 -->
    <el-dialog
      title="添加商品"
      :close-on-click-modal="false"
      :visible.sync="adddialog"
      center="true"
      width="500px">
      <div class="t_search_box" style="text-align: center; margin-bottom: 20px;">
        <el-input v-model="addsku" :disabled="bianjizhong" placeholder="请输入商品编码"></el-input>
      </div>
      <div>
        <el-select class="t_search_box" style="width: 100%;" clearable v-model="month" filterable placeholder="选择领取月份">
          <el-option :label="item" :value="item"  v-for="item in 24" :key="item" ></el-option>
        </el-select>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="background-color: #2974FF;" type="danger" round @click="addbtn">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  import robot from '@/components/robot.vue'

  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot,
      "robot":robot
    },
    name: 'quanyi',
    data() {
      return {

        shopid:'',
        month:"",
        tableData: [],
          adddialog:false,
          addsku:'',
          total:1000,
          bianjizhong:false
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      //列表
      this.getlist()

    },
    methods: {
        //列表
        getlist(){
          axios.get('/api/plan-market/goods/gift/info/get')
          .then((response) => {
            if (response.data.msg.code == 0) {
              console.log('列表')
              console.log(response)
              this.tableData = response.data.data.list
              this.total = response.data.data.total
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
        },
        //翻页
        changepage(val){
          console.log(val)
        },
        //打开添加弹窗
        openadd(){
          this.addsku = ''
          this.month = ""
          this.adddialog = true
          this.bianjizhong = false
        },
        bianji:function(item){
          this.addsku = item.source_sku
          this.month = item.month
          this.bianjizhong = true
          this.adddialog = true
        },
        //添加
        addbtn(){
          axios.post('/api/plan-market/goods/gift/info/add',{
            source_sku:this.addsku,
            month:this.month
          })
          .then((response) => {
            if (response.data.msg.code == 0) {
              this.$message({
                message: '操作成功',
                type: 'success'
              });
              this.adddialog = false
              this.getlist()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })

        },
        //返回
        goBack() {
          this.$router.push('/quanyi')
        },
        //删除
        handleDelete(id){
          this.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            axios.post('/api/plan-market/goods/gift/info/del',{
              id:id
            })
            .then((response) => {
              if (response.data.msg.code == 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success'
                });
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
    },
    beforeDestroy(){

    },


  }
</script>

<style  scoped>



    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .powertopcon {
      display: flex;
      width: 800px;
    }
    .t_jqr_box{
      background-color: #007EFF;
      color: white;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 32px;
      width: 160px;
      margin-right: 30px;
      border-radius: 3px;
      cursor: pointer;

    }
    .powertopli {
      width: 180px;
      line-height: 50px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }

    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
      color:#2974FF ;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }
    .con {
				padding: 20px ;
    }
    .t_overtips{
      width: 100%;
      overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
      text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
      white-space: nowrap;     /*文本不换行*/
    }
    .t_tongji_box{
      background-color: rgb(241, 241, 241);
      padding: 16px 30px;
      box-sizing: border-box;
      /* font-size: 18px; */
      display: flex;
      color: #515151;
      margin-top: 20px;
      margin-bottom: 20px;
    }
    .t_title_box{
      display: flex;
      align-items: center;
      color: #525252;
      margin-bottom: 10px;
      margin-top: 20px;
    }
    .t_red_g{
      background-color: #2974FF;
      width: 4px;
      height: 16px;
      margin-right: 10px;
    }
    .t_red_time{
      color: #2974FF;
    }
    .t_search_input{
      width: 191px;
      margin-bottom: 5px;
    }
    /* .t_search_box{
      display: flex;
      flex-wrap: wrap;
    } */
    /deep/.t_search_box .el-input--suffix .el-input__inner  {
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-range-editor.el-input__inner{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-date-editor .el-range-input{
      background-color: #f7f8fa;
      border: none;
    }
    /deep/.t_search_box .el-input__inner{
      background-color: #f7f8fa;
      border: none;

    }


</style>
